import React, {useState} from "react";
import MarkdownEditor from "../../../../components/MarkdownEditor";
import {Button, Form, Input, Modal, Row, Space} from "@douyinfe/semi-ui";
import GlobalHeader from "../../../../components/GlobalHeader";
import {ArticleControllerService} from "../../../../service";
import {Toast} from '@douyinfe/semi-ui';
import "./index.css"

const MdCreateView: React.FC = () => {
    const [value, setValue] = useState('欢迎使用markdown编辑器');
    const [visible, setVisible] = useState(false);

    const [title,setTitle]=useState<string>();
    const [formApi, setFormApi] = useState<object>();
    const getFormApi = (formapi: object) => {
        setFormApi(formapi);
    }
    const handleSubmit = async () => {
        const res = await ArticleControllerService.articlePublish({
            type: "Markdown",
            content: value,
            title:title,// @ts-ignore
            ...formApi.getValues(),
        })
        if (!res.data) {
            Toast.error("提交失败：" + res.message);
            return;
        }
        Toast.info({
            content: "发布成功",
        });
        setVisible(false);
    }
    return (
        <div className={"root"}>
            <GlobalHeader/>
            <div className={"mdCreateViewParent"}>
                <div className={"mdCreateViewSecondChild"}>
                    <Button className={'publish'} onClick={() => {
                        setVisible(true);
                    }}>发布</Button>
                </div>
                <div>标题：
                    <Input
                        onChange={setTitle}
                        style={{
                            width:"50%"
                        }} placeholder={"在此输入标题"}></Input>
                </div>


                <MarkdownEditor value={value} setValue={setValue}/>
            </div>
            {/*<div className={'parent'}>*/}

            {/*</div>*/}
            <Modal
                title="新建"
                visible={visible}
                onOk={() => {
                    handleSubmit()
                }}
                style={{width: 600}}
                onCancel={() => {
                    setVisible(false);
                }}
            >
                <Form
                    getFormApi={getFormApi}
                >
                    <Row>
                        <Form.Select initValue={'public'} field={"status"} label={"访问权限"}>
                            <Form.Select.Option value={'public'} label={"公开"}/>
                            <Form.Select.Option value={'private'} label={"好友可见"}/>
                            <Form.Select.Option value={'share_with_friend'} label={"私密"}/>
                        </Form.Select>
                    </Row>
                    <Row>
                        <Form.TextArea field={'description'} maxCount={512} maxLength={512}/>
                    </Row>
                </Form>
            </Modal>
        </div>


    )
}
export default MdCreateView;
